<template>
  <div>
    <!-- <h1 v-aa="pp"></h1> -->
    <input type="text" v-aa />输入
    <h1 v-bb="pp">我是一个卖药的</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        <img :src="item.img" style="width: 200px" alt="" />
        {{ item.title }}
      </li>
    </ul>
    <div v-lo="list.length == 0"></div>
    <hr />
    <br />
    <hr />
    <img
      style="width: 500px"
      src="http://ajax-api.itheima1.net/images/0.webp"
      alt=""
      v-sdf="Imgg"
    />
  </div>
</template>
<script>
// import parent from './provide/parent.vue'
import Imgg from './assets/logo.png'
import axios from 'axios'
export default {
  name: '',
  directives: {
    'bb': {
      inserted (es, ad) {
        // console.log(es, ad.value, 111111);
        es.innerHTML = ad.value
      }
    },
    'lo': {
      inserted (er, ad) {
        // console.log(er, ad.value, 111111);
        er.classList.add('active')
        er.innerHTML = '加载中......'
      },
      update (er, ad) {
        console.log(er, ad.value, 111111);
        // er.classList.add('active')
        setTimeout(() => {
          er.classList.remove('active')
        }, 3000)
      },

    },
    'sdf': {
      inserted (er, ad) {
        console.log(er, ad, 1111111);
        er.onerror = function () {
          er.src = ad.value
        }
        // ad.src =
      }
    }

  },
  data () {
    return {
      pp: '123456,我是要桑小淘气',
      list: [],
      ss: 'https://ts1.cn.mm.bing.net/th/id/R-C.68bf20de55aec69cda60bb6fde43bac1?rik=87mpTEzx%2fTF3yg&riu=http%3a%2f%2fi3.hunantv.com%2fp1%2f20150305%2f1135416494C.jpg&ehk=GefM8SQITftvgQfVxsjdXA%2fzUI6eCQGUxWDr9n4UZlI%3d&risl=&pid=ImgRaw&r=0'
      ,
      Imgg
    }
  },
  created () {
    console.log(this.$children, 11111);
    this.fn()
  },
  computed: {
  },
  methods: {
    async fn () {
      const res = await axios.get('http://hmajax.itheima.net/api/news')
      this.list = res.data.data
    }
  }
}
</script>
<style lang='less'  scoped>
.active {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  text-align: center;
  line-height: 100vh;
  font-size: 100px;
  color: red;
}
</style>
